<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比例尺</title>
</head>
<body>
    <!-- SVG -->
    <h1>SVG</h1>
    <div class="svgBox">
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        // 准备画布
        let boxWidth = 300;     // 画布宽
        let boxHeight = 300;    // 画布高
        let svg = d3.select('.svgBox')    // 选择文档中的div.svgBox元素
            .append('svg')      // 添加一个svg元素
            .attr('width', boxWidth)    // 设置宽度
            .attr('height', boxHeight)     // 设置高度
            .style('background-color', 'red');    // 设置背景颜色

        // 准备比例尺
        let dataSet = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

        let linear = d3.scaleLinear()
            .domain([0, d3.max(dataSet)])
            .range([0, 250]);

        // 画矩形
        let rectHeight = 25; //每个矩形所占的像素高度(包括空白)
        svg.selectAll('rect')
            .data(dataSet)
            .enter()
            .append('rect')
            .attr('x', 20)
            .attr('y', (d, i) => {
                return i * rectHeight;
            })
            .attr('width', (d) => {
                return linear(d); // 在这里使用比例尺
            })
            .attr('height', rectHeight -2)
            .attr('fill', 'steelblue');
    </script>
</body>
</html>